<template>
  <div>
    <div>
      <el-card>
        您好，<span style="color: #e7230d">{{ user?.name }}</span>！欢迎使用登录本系统
      </el-card>

      <div style="display: flex">
        <div style="margin-top: 10px;width: 50%">
          <el-card>
            <div style="margin-top: 10px;margin-bottom: 30px; font-size: 20px; font-weight: bold">公告信息</div>
            <div >
              <el-timeline  reverse slot="reference">
                <el-timeline-item v-for="item in data" :key="item.id" :timestamp="item.time">
                  <el-popover
                      placement="right"
                      width="200"
                      trigger="hover"
                      :content="item.content">
                    <span slot="reference">{{ item.title }}</span>
                  </el-popover>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </div>

        <div style="width: 50%;margin-top: 10px;margin-left: 10px">
          <el-card>
            <div style="margin-bottom: 15px; font-weight: bold; font-size: 18px;margin-bottom: 30px">公告信息</div>
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item v-for="item in data" :title="item.title" :name="item.id">
                <div>{{item.content}}</div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </div>
      </div>
    </div>

    <el-card style="margin-top: 10px">
      <div style="display: flex">
        <div style="flex: 1; margin-top: 50px;">
          <div id="bie" style="width: 100%; height: 400px"></div>
        </div>
        <div style="flex: 1;   margin-top: 50px">
          <div id="bar" style="width: 100%; height: 400px"></div>
        </div>
        <div style="flex: 1; margin-top: 50px">
          <div id="line" style="width: 100%; height: 400px"></div>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>

import request from "@/utils/request";
import * as echarts from 'echarts';

export default {
  name: 'HomeView',

  data() {
    return {
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      activeName:'',
      data:[]
    }
  },
  mounted() {
    this.findNotice()
    this.initEcharts()
  },
  methods:{
    findNotice(){
      request.get("/notice").then(res =>{
        if (res.code === '200'){
          this.data = res.data
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    initEcharts() {
      request.get("/book/echarts/bie").then(res => {
        if (res.code === '200') {
          // 开始去渲染饼图数据啦
          this.initBie(res.data)
        } else {
          this.$message.error(res.msg)
        }
      })
      request.get("/book/echarts/bar").then(res => {
        if (res.code === '200') {
          // 开始去渲染柱状图数据啦
          let map = res.data;
          this.initBar(map.xAxis, map.yAxis)
          // 开始去渲染折线图数据啦
          this.initLine(map.xAxis, map.yAxis)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    initBie(data) {
      let chartDom = document.getElementById('bie');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '图书统计（饼图）',
          subtext: '统计维度：图书分类',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '图书分类',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    initBar(xAxis, yAxis) {
      let chartDom = document.getElementById('bar');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '图书统计（柱状图）',
          subtext: '统计维度：图书分类',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yAxis,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            // 添加 itemStyle 设置
            itemStyle: {
              // 为每个柱子设置随机颜色
              color: function(params) {
                // 生成随机的颜色
                var colorList = [
                  '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                  '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                  '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                ];
                return colorList[Math.floor(Math.random() * colorList.length)];
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    initLine(xAxis, yAxis) {
      let chartDom = document.getElementById('line');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '图书统计（折线图）',
          subtext: '统计维度：图书分类',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yAxis,
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }

}
</script>
